<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<html>
<body>
<script type="text/javascript" src="/admin/js/jscharts.js" charset="UTF-8"></script>
<script language="javascript" type="text/javascript">
function showChart(){
	var myChart = new JSChart('graph', 'line');
	myChart.setDataArray([
							<c:forEach var="c1" items="${detail.chartList}" varStatus="vs">
								[${fn:substring(c1.time,8,10)},${c1.income}]
								<c:if test="${vs.count != detail.chartList.size()}">
									,
								</c:if>
							</c:forEach>
	                      ], 'red');
	myChart.setDataArray([
							<c:forEach var="c1" items="${detail.chartList}" varStatus="vs">
								[${fn:substring(c1.time,8,10)},${c1.outcome}]
								<c:if test="${vs.count != detail.chartList.size()}">
									,
								</c:if>
							</c:forEach>
	                      ], 'green');
	                      
	                      
	                      
	myChart.setAxisPaddingBottom(40);
	myChart.setTextPaddingBottom(10);
	//myChart.setAxisValuesNumberY(5);
	myChart.setTitle('红色:支出, 绿色:回收');
	myChart.setIntervalStartY(0);
	//myChart.setIntervalEndY(2000);
	<c:forEach var="c1" items="${detail.chartList}" varStatus="vs">
		myChart.setLabelX([${fn:substring(c1.time,8,10)},'${fn:substring(c1.time,8,10)}号']);
	</c:forEach>
	myChart.setAxisValuesNumberX(${detail.chartList.size()});//设置x轴坐标有几个点
	myChart.setShowXValues(false);
	myChart.setTitleColor('#454545');
	myChart.setAxisValuesColor('#454545');
	myChart.setLineColor('#AB0707', 'red');
	myChart.setLineColor('#37AA03', 'green');
	myChart.setLineColor('#0033CC', 'blue');
	myChart.setLineColor('#FF9900', 'yellow');
	myChart.setLineColor('#EE00EE', 'violet');
	myChart.setLineColor('#000000', 'black');
	
	<c:forEach var="c1" items="${detail.chartList}" varStatus="vs">
		myChart.setTooltip([${fn:substring(c1.time,8,10)}]);
	</c:forEach>
	myChart.setFlagColor('#9D16FC');
	myChart.setFlagRadius(3);
	myChart.setBackgroundImage('');
	myChart.setSize(900, 400);
	myChart.draw();
}

var clickTimes = 0;
function seePic(){
	clickTimes++;
	if(clickTimes == 1){
		showChart();
	}
	if(clickTimes % 2 == 0){
		$("#container").hide();
		$("#lookChart").html("查看图表");
	}else{
		$("#container").show();
		$("#lookChart").html("收起图表");
	}
}
</script>
<form class="form-inline" action="" method="post">从
  <div class="datepicker input-append">
    <input data-format="yyyy-MM-dd" type="text" value="${beginDate}" name="beginDate"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
  到
  <div class="datepicker input-append">
    <input data-format="yyyy-MM-dd" type="text" value="${endDate}" name="endDate"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
  <button type="submit" class="btn">查询</button>
  <button type="button" class="btn" id="lookChart" onclick="seePic();">查看图表</button>
</form>
<div>
<p>
	<span>当前所有玩家剩余的房币总额：${remainRoombi}</span>
</p>
</div>
<div id="container">
	<div id="graph"></div>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>类型</th>
      <th>产出房币</th>
      <th>回收房币</th>
    </tr>
  </thead>
  <tbody>
  <c:set var="roombiOutAll" value="0"/>
  <c:set var="roombiInAll" value="0"/>
  <c:forEach var="m" items="${detail.list}">
    <tr>
      <td>${m.actionName}</td>
      <td>${m.outCome}</td>
      <c:set var="roombiOutAll" value="${roombiOutAll +  m.outCome}"/>
      <td>${m.inCome}</td>
      <c:set var="roombiInAll" value="${roombiInAll +  m.inCome}"/>
    </tr>
  </c:forEach>
   <tr>
      <td>合计</td>
      <td><c:out value="${roombiOutAll}"/></td>
      <td><c:out value="${roombiInAll}"/></td>
    </tr>
  </tbody>
</table>
</body>
</html>